import './index.css'
import { FC } from 'react'

interface LoaderProps {
  spinning: boolean;
  children: JSX.Element
}

const Loading: FC<LoaderProps> = ({
  spinning,
  children,
}) => {
  const loader = (
    <div className="loader">
      <div className="loader-dot-wrap">
        <div className='loader-dot'></div>
        <div className='loader-dot'></div>
        <div className='loader-dot'></div>
        <div className='loader-dot'></div>
        <div className='loader-dot'></div>
        <div className='loader-dot'></div>
      </div>
      <div className='loader-text'></div>
    </div>
  )
  return (
    spinning ? loader : children
  )
}

export default Loading